import './App.css'
import { lazy, Suspense } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

import Home from './pages/Home'

// 组件的按需加载
const Layout = lazy(() => import('./pages/Layout'))
// const Home = lazy(() => import('./pages/Home'))
const Article = lazy(() => import('./pages/Article'))
const Publish = lazy(() => import('./pages/Publish'))

function App() {

  return (
    <Suspense fallback={
      <div style={{textAlign:'center',marginTop:'200px'}}>
        Loading
      </div>
    }>
      <BrowserRouter>
        <div className="App">
          <Routes>
            <Route path='/' element={<Layout></Layout>}>
              <Route index element={<Home></Home>}></Route>
              <Route path='article' element={<Article></Article>}></Route>
              <Route path='publish' element={<Publish></Publish>}></Route>
            </Route>

          </Routes>

          {/* <Layout></Layout> */}
        </div>
      </BrowserRouter>
    </Suspense>


  )
}

export default App
